import { nanoid } from "nanoid"
import store from '@/store'
import { computed } from "vue";
import dayjs from 'dayjs';
import utils from '@/common/utils/utils'

// 图文剪辑组 最大数量
const GraphicTextCut_maxLength = 10

// 图文剪辑单镜头组 最大标题数量
const GraphicTextCut_maxTitleLength = 10

// 字体列表
const fontList = computed(() => {
    return store.state.GraphicTextMixCut.fontList
});

// 默认字体
const defaultFont = computed(() => {
    return store.state.GraphicTextMixCut.defaultFont
});

// 默认花字
const defaultFlower = computed(() => {
    return store.state.GraphicTextMixCut.defaultFlower
});

// 字体大小列表
const getFsizeList = () => {
    return [
        {
            lable: 12,
            value:12
        },
        {
            lable: 14,
            value:14
        },
        {
            lable: 18,
            value:18
        },
        {
            lable: 24,
            value:24
        },
        {
            lable: 32,
            value:32
        },
        {
            lable: 36,
            value:36
        },
        {
            lable: 44,
            value:44
        },
        {
            lable: 48,
            value:48
        },
        {
            lable: 64,
            value:64
        },
        {
            lable: 80,
            value:80
        },
    ]
}

// 获取图片模板列表数据
const getGraphicImgTemplate = () => {
    return [
        {
            value: 'single_image',
            name: '单图',
            dec: '随机抽取1张图片使用',
            minNum: 1,
            img: `${utils.staticPath}images/workAi/shotstack/imagetpl/single_image.png`
        },
        {
            value: 'couple_image_9_16',
            name: '2图(9:16)',
            dec:'随机抽取2张图片组合使用，单张素材比例建议9:16',
            minNum: 2,
            img: `${utils.staticPath}images/workAi/shotstack/imagetpl/couple_image_9_16.png`
        },
        {
            value: 'couple_image_16_9',
            name: '2图(16:9)',
            dec: '随机抽取2张图片组合使用，单张素材比例建议16:9',
            minNum: 2,
            img: `${utils.staticPath}images/workAi/shotstack/imagetpl/couple_image_16_9.png`
        },
        {
            value: 'couple_image_1_1',
            name: '2图(1:1)',
            dec: '随机抽取2张图片组合使用，单张素材比例建议1:1',
            minNum: 2,
            img: `${utils.staticPath}images/workAi/shotstack/imagetpl/couple_image_1_1.png`
        },
        {
            value: 'four_image_9_16',
            name: '4图(9:16)',
            dec: '随机抽取4张图片组合使用，单张素材比例建议9:16',
            minNum: 4,
            img: `${utils.staticPath}images/workAi/shotstack/imagetpl/four_image_9_16.png`
        },
        {
            value: 'four_image_1_1',
            name: '4图(1:1)',
            dec: '随机抽取4张图片组合使用，单张素材比例建议1:1',
            minNum: 4,
            img: `${utils.staticPath}images/workAi/shotstack/imagetpl/four_image_1_1.png`
        },
    ]
}

// 获得标题组的默认数据
const getTextData = () => {
    return {
        config: {
            x: 0,
            y: 0,
            // 字体
            font: defaultFont.value.font_family,
            // 字体id
            font_id: defaultFont.value.id,
            font_size: 44,
        },
        content: ''
    }
}

// 获得主标题
const getTextMain = () => {
    const data = getTextData()
    // 花字
    data.config.flower_id = defaultFlower.value?.title?.id || ''
    data.config.font_size = 44
    // data.content = '主标题'
    return data
}

// 获得副标题
const getTextSub = () => {
    const data = getTextData()
    // 花字
    data.config.flower_id = defaultFlower.value?.tts?.id || ''
    data.config.font_size = 36
    // data.content = '副标题'
    return data
}

// 获得  texts 中的 一组数据
const getTextsItem = () => {
    return {
        // 主标题
        main: getTextMain(),
        // 副标题
        deputy:null
    }
}

// 获得 一组resource_data 数据
const getResourceData = (params) => {
    const {name} = params
    return {
        id: nanoid(),
        name: name,
        images: [
        ],
        // 贴纸列表
        stickers:[],
        // 标题组列表
        texts: [
            getTextsItem()
        ],

        /**
         * @param {
         * 图片模版 
         * single_image: 单图; 
         * couple_image_9_16: 2图9:16; 
         * couple_image_16_9: 2图16:9;
         * couple_image_1_1: 2图1:1;
         * four_image_9_16: 4图9:16;
         * four_image_1_1: 4图1:1;
         * } image_tpl
         *  */ 
        image_tpl: 'single_image',
    }
}

// 获得图文剪辑 基础数据
const getBaseGraphicText = () => {

    let currentDateTime = dayjs().format('YYYY-MM-DD_HH:mm:ss');

    return {
        id: 0,
        title: `图文剪辑${currentDateTime}`,
        resource_data: [
            {
                ...getResourceData({name:'封面'}),
            },
            getResourceData({name:'场景1'}),
            getResourceData({name:'场景2'})
        ]
    }
}

// 滚动条滚动到最底部
const scrollToBottom = (className) => {
    const el = document.querySelector(className);
    el.scrollTo({
        top: el.scrollHeight,
        behavior: "smooth",
    });
};

// 获取手机组件的宽高
const getPixel = (image_tpl) => {
    /**
     * @param {
        * 图片模版 
        * single_image: 单图; 
        * couple_image_9_16: 2图9:16; 
        * couple_image_16_9: 2图16:9;
        * couple_image_1_1: 2图1:1;
        * four_image_9_16: 4图9:16;
        * four_image_1_1: 4图1:1;
     * } image_tpl
    *  */ 
    if (image_tpl == 'single_image' || image_tpl == 'couple_image_9_16' || image_tpl == 'four_image_9_16') {
        return {
            w: 1080,
            h:1920
        }
    } else if (image_tpl == 'couple_image_16_9') {
        return {
            w: 1920,
            h: 1080
        }
    } else if (image_tpl == 'couple_image_1_1' || image_tpl == 'four_image_1_1') {
        return {
            w: 1080,
            h: 1080
        }
    } else {
        console.log('未适配到');
        return {
            w: 1080,
            h:1920 
        }
    }
}
  
// 获取偏 绘图偏移值 - X
const getOffsetX = (params) => {
    const { w, scaleX, imgWidth } = params
    
    const restoredW = w / scaleX;
    const offsetX = (imgWidth / 2) - (restoredW / 2);
    return offsetX;
}

// 获取偏 绘图偏移值 - Y
const getOffsetY = (params) => {
    const { h, scaleY, imgHeight } = params
    // 根据缩放比例反向推算出在原图片宽高比下对应的宽度（复原宽度）
    const restoredY = h / scaleY;
    const offsetY = (imgHeight / 2) - (restoredY / 2);
    return offsetY;
}

// 计算图片的缩放 偏移位置方法
const calculateFn = (params) => {
    const { item, x, y,w, h, image_tpl, aspectRatio, targetRatio, imgWidth, imgHeight, image } = params
    // item.layerConfig = {
    //         x,
    //         y,
    //         width: w,
    //         height: h,
    //         draggable: false,
    //     }

        let fillPatternScale
        let fillPatternOffset

    // 即图片相对更 “宽”
    if (aspectRatio > targetRatio) {
        const scaleY = h / imgHeight;
        fillPatternScale = {
            x: scaleY,
            y: scaleY
        };
    } else {
        const scaleX = w / imgWidth;
        fillPatternScale = {
            x: scaleX,
            y: scaleX
        };
        }

            // 计算偏移比例的参数
    const scaleX = fillPatternScale.x;
    const scaleY = fillPatternScale.y;

    if (aspectRatio == 1 || imgWidth > imgHeight) {
    const offsetX = GTC_tools.getOffsetX({w,scaleX,imgWidth});
    fillPatternOffset = {
        x: offsetX,
        y: 0
    }
    } else if (imgHeight > imgWidth) {
        // 9:16下, 长图 位移x
        if (image_tpl == 'couple_image_9_16') {
            const offsetX = GTC_tools.getOffsetX({w,scaleX,imgWidth});
            fillPatternOffset = {
                x: offsetX,
                y: 0
            }
        } else {
            const offsetY = GTC_tools.getOffsetY({h,scaleY,imgHeight});
            fillPatternOffset = {
                    x: 0,
                    y:offsetY,  // 修改为基于缩放后图片高度与目标区域高度差值的一半来计算y方向偏移量
            };
        }
    }

    item.Imgconfig = {
        draggable: false,
        width: w,
        height: h,
        x,
        y,
        fillPatternImage: image,
        fillPatternScale,
        fillPatternOffset,
        fillPatternRepeat: 'no-repeat'
    }

    return item
    
}

const GTC_tools = {
    // 图文剪辑最大组数
    GraphicTextCut_maxLength,
    // 图文剪辑单镜头组 最大标题数量
    GraphicTextCut_maxTitleLength,
    // 获取图文剪辑基础数据
    getBaseGraphicText,
    // 获取图文剪辑基础数据 -- resource_data
    getResourceData,
    // 滚动条滚动到最底部 方法
    scrollToBottom,
    // 图片模板数据
    getGraphicImgTemplate,
    // 获得 texts 中的 一组数据
    getTextsItem, 
    // 获得主标题
    getTextMain,
    // 获得副标题
    getTextSub,
    // 获得字号数组
    getFsizeList,
    // 获得手机组件的宽高
    getPixel,
    // 获取偏移的x值
    getOffsetX,
    // 获取偏移的y值
    getOffsetY,
    // 计算图片的缩放 偏移位置方法
    calculateFn
}

export default GTC_tools